<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="themes/bootstrap/easyui.css" rel="stylesheet">
<link href="themes/icon.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
	$(function() {

		//日期输入框
		$.fn.datebox.defaults.parser = function(s) {
			var t = Date.parse(s);
			if (!isNaN(t)) {
				return new Date(t);
			} else {
				return new Date();
			}
		}

		$("#searchDate").datebox({
			required : true,
			prompt : '请输入日期',
		});

		//选中日期后点击部门购买消费按钮重载部门购买消费表格
		$("#departSpend").linkbutton({
			onClick : function() {
				//获取日期输入框中的值
				var date = $("#searchDate").datebox('getText');
				//显示部门购买消费表格
				$("#departSpendTable").show();
				$("#spend").panel('open');
				//隐藏其余表格
				$("#departPayrollsTable").hide();
				$("#elPayrolls").panel('close');

				$("#deparTotalSpendTable").hide();
				$("#departPayrollsSpends").panel('close');

				$("#spendsTable").hide();
				$("#departTotalSpends").panel('close');
				$("#departSpendTable").datagrid('reload', {
					date : date
				//查询日期
				});
			}
		});
		//选中日期后点击部门员工工资按钮重载部门员工工资表格
		$("#departPayrolls").linkbutton({
			onClick : function() {
				//获取日期输入框中的值
				var date = $("#searchDate").datebox('getText');
				if (date == "") {
					$.messager.alert("提示", "请输入日期");
				} else {
					//显示部门员工工资表格
					$("#departPayrollsTable").show();
					$("#elPayrolls").panel('open');
					//隐藏表格其余
					$("#departSpendTable").hide();
					$("#spend").panel('close');

					$("#deparTotalSpendTable").hide();
					$("#departPayrollsSpends").panel('close');

					$("#spendsTable").hide();
					$("#departTotalSpends").panel('close');
					$("#departPayrollsTable").datagrid('reload', {
						date : date
					//查询日期
					});
				}

			}
		});
		//选中日期后点击部门月工资支出按钮重载部门月工资支出表格
		$("#deparTotalSpend").linkbutton({
			onClick : function() {
				//获取日期输入框中的值
				var date = $("#searchDate").datebox('getText');
				if (date =="") {
					$.messager.alert("提示", "请输入日期");
				} else {
					//显示部门月工资表格
					$("#deparTotalSpendTable").show();
					$("#departPayrollsSpends").panel('open');
					//隐藏表格其余
					$("#departSpendTable").hide();
					$("#spend").panel('close');

					$("#departPayrollsTable").hide();
					$("#elPayrolls").panel('close');

					$("#spendsTable").hide();
					$("#departTotalSpends").panel('close');
					$("#deparTotalSpendTable").datagrid('reload', {
						date : date
					//查询日期
					});
				}

			}
		});
		//选中日期后点击月支出按钮重载月总支出表格
		$("#spends").linkbutton({
			onClick : function() {
				//获取日期输入框中的值
				var date = $("#searchDate").datebox('getText');
				if (date =="") {
					$.messager.alert("提示", "请输入日期");
				} else {
					//显示部门月工资表格
					$("#spendsTable").show();
					$("#departTotalSpends").panel('open');

					//隐藏表格其余
					$("#departSpendTable").hide();
					$("#spend").panel('close');

					$("#departPayrollsTable").hide();
					$("#elPayrolls").panel('close');

					$("#deparTotalSpendTable").hide();
					$("#departPayrollsSpends").panel('close');
					$("#spendsTable").datagrid('reload', {
						date : date
					//查询日期
					});
					//显示页脚
					$('#spendsTable').datagrid({
						showFooter : true,
					});
				}
				

			}
		});
		//表格
		// 部门购买消费表格
		$('#departSpendTable').datagrid({
			striped : true,//斑马线效果
			rownumbers : true,//展示行序号
			fitColumns : true,
			pagination : true,//展示分页

			url : '${pageContext.request.contextPath}/spendTable',
			columns : [ [ {
				field : 'dName',
				title : '部门',
				width : 100
			}, {
				field : 'aContent',
				title : "物品",
				width : 100
			}, {
				field : 'money',
				title : '购买消费',
				width : 100
			}, {
				field : 'approveDate',
				title : '日期',
				width : 100
			}, ] ],

		});
		//部门员工工资表格
		$('#departPayrollsTable').datagrid({

			striped : true,//斑马线效果
			rownumbers : true,//展示行序号
			fitColumns : true,
			pagination : true,//展示分页

			url : '${pageContext.request.contextPath}/departPayrolls',
			columns : [ [ {
				field : 'dName',
				title : '部门',
				width : 100
			}, {
				field : 'elName',
				title : '员工',
				width : 100
			}, {
				field : 'salary',
				title : '薪资',
				width : 100
			}, ] ],

		});
		// 部门月工资支出 
		$('#deparTotalSpendTable').datagrid({
			striped : true,//斑马线效果
			rownumbers : true,//展示行序号
			fitColumns : true,
			pagination : true,//展示分页

			url : '${pageContext.request.contextPath}/deparTotalSpend',
			columns : [ [ {
				field : 'dName',
				title : '部门',
				width : 100
			}, {
				field : 'salary',
				title : '薪资和',
				width : 100
			}, ] ],

		});
		//月总支出 
		$('#spendsTable').datagrid({

			striped : true,//斑马线效果
			rownumbers : true,//展示行序号
			fitColumns : true,
			pagination : true,//展示分页

			url : '${pageContext.request.contextPath}/spends',
			columns : [ [ {
				field : 'dName',
				title : '部门',
				width : 100
			}, {
				field : 'money',
				title : '本月部门购买支出总和',
				width : 100
			}, {
				field : 'salary',
				title : '薪资和',
				width : 100
			}, {
				field : 'spends',
				title : '总支出',
				width : 100
			}, ] ],

		});
		//加载时隐藏员工工资表格
		$("#elPayrolls").panel({
			closed : true
		});
		//加载时隐藏部门月工资支出表格
		$("#departPayrollsSpends").panel({
			closed : true
		});
		//加载时隐藏总支出表格
		$("#departTotalSpends").panel({
			closed : true
		});
	});
</script>
<body>

	<div>
		<!-- 日期输入框 -->
		<input id="searchDate" type="text" />
		<!--按钮组 -->
		<a id="spends" href="#" class="easyui-linkbutton"> 月总支出</a> <a
			id="departPayrolls" href="#" class="easyui-linkbutton">部门员工工资</a> <a
			id="deparTotalSpend" href="#" class="easyui-linkbutton">部门月工资支出</a> <a
			id="departSpend" href="#" class="easyui-linkbutton">部门购买消费</a>
	</div>
	<!-- 部门购买消费表格 -->
	<div class="easyui-panel" id="spend">
		<table id="departSpendTable"></table>
	</div>
	<!-- 部门员工工资表格 -->
	<div class="easyui-panel" id="elPayrolls">
		<table id="departPayrollsTable"></table>
	</div>
	<!-- 部门月工资支出 -->
	<div class="easyui-panel" id="departPayrollsSpends">
		<table id="deparTotalSpendTable"></table>
	</div>
	<!-- 月总支出 -->
	<div class="easyui-panel" id="departTotalSpends">
		<table id="spendsTable"></table>
	</div>
</body>
</html>